import React from "react";
import { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";
import ReaderSetting from "../readerSetting";
import {
    MenuOutlined,
    HomeOutlined,
    BookOutlined,
    SettingOutlined
} from '@ant-design/icons';
import { Typography, Drawer, Button, Space,Tabs,List } from 'antd';

export default function ReaderControls(props) {
    const navigate = useNavigate();
    const { theme} = props;
    // console.log(props.fontSize);
    const [showSetting, setShowSetting] = useState(false);
    function showSettingChange() {
        // console.log(showSetting)
        return !showSetting
    }
    return (
        <div className={theme+" readerControls"}>
            <Button className='.readerControlBtn' icon={<SettingOutlined />} shape='circle' size='large' onClick={() => setShowSetting(!showSetting)}></Button>
            <Button className='.readerControlBtn' icon={<HomeOutlined />} shape='circle' size='large' onClick={() => {navigate(`/bookshelf`)}}></Button>
            <ReaderSetting showSetting={showSetting} {...props}/>
        </div>
    )
}